<template>
	<view class="main">
		<van-toast id="van-toast" />
		<tou_hand1 handtitle='附近电站'></tou_hand1>
		<view class="show">
			<view id="container" style="width:100%;height:100%;"></view>
		</view>
		<view class="xiang" v-show="typeshow==1">
			<view class="tap">
				<view class="tapone">
					<view class="tapone1">
						<view class="tapone1left">{{list.projectName}}-{{list.areaName}}</view>

					</view>
					<view class="tapone2">距我{{list.distanceStr}}</view>

				</view>
				<view class="taptwo">
					<view class="taptwoleft" @click="showPopup">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/xiangqing.png"></image>
						<view>详情</view>
					</view>
					<view class="taptworight" @click="txbtn">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/daohang.png"></image>
						<view>导航</view>
					</view>
				</view>
			</view>
		</view>
		<van-popup :show="xqtype">
			<view class="stwo">
				<view class="stwohand">
					充电区详情<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/close.png" @click="showclose"></image>
				</view>
				<view class="stwofoot">
					<view class="sfone">
						<view class="sfoneleft">
							小区：
						</view>
						<view class="sfoneright">
							{{list1.projectName}}
						</view>
					</view>
					<view class="sfone">
						<view class="sfoneleft">
							充电区：
						</view>
						<view class="sfoneright">
							{{list1.areaName}}
						</view>
					</view>
					<view class="sfone">
						<view class="sfoneleft">
							<span style="color: #4B98ED;font-weight: 700;">{{list1.usablePort}}</span>个可用|
							共<span style="color: #4B98ED;font-weight: 700;">{{list1.totalPort}}</span>个端口
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import tou_hand1 from '../../components/tou_hand2/tou_hand2.vue'
	export default {
		components: {
			tou_hand1
		},

		data() {
			return {
				longitude: 0, //经度
				latitude: 0, //纬度
				list: {}, //标记数据
				typeshow: 0,
				list1: {},

				xqtype: false, //详情显示
				maplist: {},
				mapdata: [],

			}
		},
		onShow() {
			this.getMyLocation();
		},
		methods: {

			//获取定位信息
			getMyLocation() {
				let _this = this;
				console.log(11);
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function (res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 	}
				// });
				
				// let data = {
				// 	url: location.href.split('#')[0],
				// 	appid: uni.getStorageSync('user').appid
				// }
				// uni.showLoading({
				// 	title: '请求位置中...'
				// })
				// _this.$base.request('configs', 'GET', data)
				// 	.then(res => {
				// 		if (res.data.code == '200') {
				// 			var timestamp = res.data.data.timestamp;;
				// 			var noncestr = res.data.data.noncestr;
				// 			var signature = res.data.data.signature;
				// 			var appId = res.data.data.appid;
				// 			wx.config({
				// 				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				// 				appId: appId, // 必填，公众号的唯一标识
				// 				timestamp: timestamp, // 必填，生成签名的时间戳
				// 				nonceStr: noncestr, // 必填，生成签名的随机串
				// 				signature: signature, // 必填，签名，见附录1
				// 				jsApiList: ['getLocation', 'openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				// 			});

				// 			wx.ready(function() {

				// 				wx.getLocation({
				// 					type: "wgs84",
				// 					success: function(res) {
				// 						uni.hideLoading()
				// 						var longitude = ''; //百度经度
				// 						var latitude = ''; //百度纬度
				// 						var convertor = new BMap.Convertor();
				// 						var ggPoint = new BMap.Point(res.longitude, res.latitude);
				// 						var pointArr = [];
				// 						pointArr.push(ggPoint);
				// 						convertor.translate(pointArr, 1, 5, function(data) {
				// 							if (data.status === 0) {
				// 								longitude = data.points[0].lng;
				// 								latitude = data.points[0].lat;
				// 								_this.showMap(latitude, longitude)
				// 							}
				// 						});
				// 					},
				// 					cancel: function(res) {
				// 						uni.hideLoading()
				// 						_this.$toast.fail('定位失败,请允许微信使用您的地理位置。')
				// 					},
				// 					fail: function(res) {

				// 						if (uni.getSystemInfoSync().platform == 'ios') {

				// 							uni.hideLoading()
				// 							uni.navigateBack({
				// 								delta: 1
				// 							})
				// 							_this.$toast.fail('定位失败，请打开手机系统的定位服务')
				// 						} else {
				// 							console.log(res.errMsg)
				// 							if (res.errMsg == "getLocation:timeout") {

				// 								uni.hideLoading()
				// 								uni.navigateBack({
				// 									delta: 1
				// 								})
				// 								_this.$toast.fail('获取定位信息超时，请检查手机系统的定位服务是否开启')
				// 							}
				// 						}
				// 					}
				// 				});

				// 			});
				// 		} else {
				// 			_this.$toast.fail(res.data.msg)
				// 			return
				// 		}

				// 	})
				// 	.catch(err => {

				// 	})
			},

			//展示地图
			showMap(latitude, longitude) {
				var _this = this
				var map = new BMap.Map("container");
				var point1 = new BMap.Point(longitude, latitude);
				map.centerAndZoom(point1, 14);
				map.addEventListener('click', function(e) {
					if (e.cb == null) {
						_this.typeshow = 0
					}
				})
				// TODO: 触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动，但是可以触发拖动事件。
				map.addEventListener("touchmove", function(e) {
					map.enableDragging();
				});
				// TODO: 触摸结束时触发次此事件  此时开启禁止拖动
				map.addEventListener("touchend", function(e) {
					map.disableDragging();
				});

				// 初始化地图 禁止拖动   注：虽禁止拖动，但是可以出发拖动事件
				map.disableDragging();

				map.enableScrollWheelZoom(true);
				_this.maplist = map
				let data = {
					distance: 5,
					longitude: longitude,
					latitude: latitude
				}
				_this.$base.request('nearby', 'GET', data)
					.then(res => {
						// var _this=this
						if (res.data.code == '0') {
							res.data.rows.unshift({
								areaId: "",
								areaName: "",
								projectName: "",
								distanceStr: "",
								longitude: longitude,
								latitude: latitude
							})
							_this.mapdata = res.data.rows
							for (var i = 0; i < res.data.rows.length; i++) {
								var data1 = res.data.rows[i];
								if (data1.areaId == "") {
									var point = new BMap.Point(data1.longitude, data1.latitude);
									var icon = new BMap.Icon('https://qiniu.jxyutuo.com/yanqin/tabBarimg/dq.png',
										new BMap.Size(42, 46))
									var marker = new BMap.Marker(point, {
										icon: icon
									});
									marker.areaId = data1.areaId;
									marker.areaName = data1.areaName;
									marker.projectName = data1.projectName;
									marker.distanceStr = data1.distanceStr;
									marker.latitude = data1.latitude
									marker.longitude = data1.longitude
									map.addOverlay(marker);
									marker.addEventListener("click", function(res1) {
										_this.typeshow = 0
									});
									// (function(){


									// })

								} else {
									var point = new BMap.Point(data1.longitude, data1.latitude);
									var icon = new BMap.Icon('https://qiniu.jxyutuo.com/yanqin/tabBarimg/biaoji.png',
										new BMap.Size(42, 46))
									var marker = new BMap.Marker(point, {
										icon: icon
									});
									marker.areaId = data1.areaId;
									marker.areaName = data1.areaName;
									marker.projectName = data1.projectName;
									marker.distanceStr = data1.distanceStr;
									marker.latitude = data1.latitude
									marker.longitude = data1.longitude
									map.addOverlay(marker);
									marker.addEventListener("click", function(res1) {
										_this.mapbtn(res1)
									});
								}

							}
						} else {
							this.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {

					})

				map.enableScrollWheelZoom(true);
			},
			//地图点击事件
			mapbtn(res1) {
				this.typeshow = 1
				this.list = res1.currentTarget
				this.maplist.clearOverlays()

				for (var i = 0; i < this.mapdata.length; i++) {
					var data1 = this.mapdata[i];
					if (data1.areaId == "") {
						var _this = this
						var point = new BMap.Point(data1.longitude, data1.latitude);
						var icon_image_url = 'https://qiniu.jxyutuo.com/yanqin/tabBarimg/dq.png';
						var icon = new BMap.Icon(icon_image_url, new BMap.Size(42, 46))
						var marker = new BMap.Marker(point, {
							icon: icon
						});
						marker.areaId = data1.areaId;
						marker.areaName = data1.areaName;
						marker.projectName = data1.projectName;
						marker.distanceStr = data1.distanceStr;
						marker.latitude = data1.latitude
						marker.longitude = data1.longitude
						_this.maplist.addOverlay(marker);
						marker.addEventListener("click", function() {
							_this.typeshow = 0
						});
						// (function(){


						// })

					} else {
						var _this = this
						if (res1.currentTarget.areaId == data1.areaId) {
							var point = new BMap.Point(data1.longitude, data1.latitude);
							var icon_image_url = 'https://qiniu.jxyutuo.com/yanqin/tabBarimg/biaoji1.png';
							var icon = new BMap.Icon(icon_image_url, new BMap.Size(42, 46))
							var marker = new BMap.Marker(point, {
								icon: icon
							});
							marker.areaId = data1.areaId;
							marker.areaName = data1.areaName;
							marker.projectName = data1.projectName;
							marker.distanceStr = data1.distanceStr;
							marker.latitude = data1.latitude
							marker.longitude = data1.longitude
							_this.maplist.addOverlay(marker);
							marker.addEventListener("click", function(res2) {
								_this.mapbtn(res2)
							});
						} else {
							var point = new BMap.Point(data1.longitude, data1.latitude);
							var icon_image_url = 'https://qiniu.jxyutuo.com/yanqin/tabBarimg/biaoji.png';
							var icon = new BMap.Icon(icon_image_url, new BMap.Size(42, 46))
							var marker = new BMap.Marker(point, {
								icon: icon
							});
							marker.areaId = data1.areaId;
							marker.areaName = data1.areaName;
							marker.projectName = data1.projectName;
							marker.distanceStr = data1.distanceStr;
							marker.latitude = data1.latitude
							marker.longitude = data1.longitude
							_this.maplist.addOverlay(marker);
							marker.addEventListener("click", function(res2) {
								_this.mapbtn(res2)
							});
						}

					}

				}

			},
			//导航
			txbtn() {
				var dizhi = this.baidutxt(this.list.longitude, this.list.latitude)

				wx.openLocation({
					latitude: dizhi.lat, //目的地latitude
					longitude: dizhi.lng, //目的地longitude
					scale: 15, //地图缩放大小，可根据情况具体调整
					name: this.list.areaName
				});

			},
			//百度坐标转腾讯地图
			baidutxt(lng, lat) {
				let x_pi = Math.PI * 3000.0 / 180.0;
				let x = lng - 0.0065;
				let y = lat - 0.006;
				let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
				let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
				let lngs = z * Math.cos(theta);
				let lats = z * Math.sin(theta);
				return {
					lng: lngs,
					lat: lats
				}
			},
			//打开详情
			showPopup() {
				this.xqtype = true;
				let data = {
					isNearBy: 'Y'
				}
				this.$base.request('nearArea' + '/' + this.list.areaId, 'GET', data)
					.then(res => {
						// uni.setStorageSync('userToken', res.data.data.token);
						if (res.data.code == 200) {
							this.list1 = res.data.data[0]


						} else {
							this.$toast.fail(res.data.msg)
						}

					})
					.catch(err => {})
			},
			//关闭详情
			showclose() {
				this.xqtype = false;
			},
		},


	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		height: 100vh;
		background-color: #2A3034;
		overflow-x: hidden;

		.show {
			padding: 10upx;

		}

		.xiang {
			width: 100%;
			position: absolute;
			bottom: 30upx;
			padding: 0 30upx;
			box-sizing: border-box;

			.tap {
				width: 100%;
				border-radius: 10upx;
				box-shadow: 5upx 5upx 2.5upx #bdbdbd;
				background-color: #FFFFFF;

				.tapone {
					width: 100%;
					box-sizing: border-box;
					padding: 30upx;
					border-bottom: 1upx solid #999999;

					.tapone1 {
						width: 100%;

						.tapone1left {
							font-size: 28upx;
							text-align: left;
						}

					}

					.tapone2 {
						color: #808080;
						font-size: 20upx;
						margin: 15upx 0;
					}

				}

				.taptwo {
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					font-size: 28upx;
					padding: 15upx 0;

					.taptwoleft {
						width: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						border-right: 1upx solid #999999;

						image {
							width: 48upx;
							height: 48upx;
							margin-right: 20upx;
						}
					}

					.taptworight {
						width: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 48upx;
							height: 48upx;
							margin-right: 20upx;
						}
					}

				}
			}
		}

		.stwo {
			width: 686upx;

			.stwohand {
				width: 100%;
				height: 64upx;
				background-color: #4B98ED;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				line-height: 64upx;
				color: #ffffff;
				box-sizing: border-box;
				padding: 0 34upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 25upx;
					height: 25upx;
				}
			}

			.stwofoot {
				width: 100%;
				box-sizing: border-box;
				padding: 43upx 36upx;

				.sfone {
					width: 100%;
					display: flex;
					margin-bottom: 20upx;

					.sfoneleft {
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 500;
						color: #333333;
					}

					.sfoneright {
						font-size: 28upx;
						font-family: PingFang SC Medium, PingFang SC Medium-Medium;
						font-weight: 700;
						color: #333333;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 500upx;
					}
				}

				.sftwo {
					width: 100%;
					margin-top: 48upx;

					.sftwohand {
						font-size: 24upx;
						font-family: PingFang SC Bold, PingFang SC Bold-Bold;
						font-weight: 700;
						color: #333333;
						margin-bottom: 26upx;
					}

					.sftwofoot {
						width: 100%;
						display: flex;

						.montleft {
							font-size: 28upx;
							font-family: PingFang SC Medium, PingFang SC Medium-Medium;
							font-weight: 500;
							color: #333333;
							width: 30%;
						}

						.montright {
							width: 100%;

							.montone {
								font-size: 28upx;
								font-family: PingFang SC Bold, PingFang SC Bold-Bold;
								font-weight: 700;
								color: #333333;
								margin-bottom: 30upx;
							}
						}
					}
				}
			}
		}


	}
</style>